<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>聚光自动搭建计划Excel生成</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/xlsx@0.18.5/dist/xlsx.full.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="./app.js"></script>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div id="app" style="display: flex;">
        <div class="app-container" style="flex: 1; max-width: calc(100% - 370px);">
            <div class="app-header">
                <h1><i class="bi bi-megaphone"></i> 聚光计划搭建辅助工具</h1>
                <p>辅助生成Excel</p>
            </div>

            <div class="app-body">
                <div class="row">
                    <!-- 左侧表单区域 -->
                    <div class="col-lg-12">
                        <!-- 广告计划信息 -->
                        <div class="card-section">
                            <h3 class="section-title"><i class="bi bi-clipboard-data"></i> 广告计划信息</h3>
                            <div class="form-row mb-3">
                                <label class="form-label required-field">子账号ID</label>
                                <div class="options-container">
                                    <input type="text" class="form-control" v-model="accountId" placeholder="请输入账号ID" style="width: 300px;">
                                </div>
                            </div>

                            <div class="form-row mb-3">
                                <label class="form-label">品牌客户</label>
                                <div class="options-container">
                                    <input type="text" class="form-control" v-model="brandClient" placeholder="请输入品牌客户" style="width: 300px;">
                                </div>
                            </div>

                            <div class="form-row mb-3">
                                <label class="form-label">产品名称</label>
                                <div class="options-container">
                                    <input type="text" class="form-control" v-model="productName" placeholder="请输入产品名称" style="width: 300px;">
                                </div>
                            </div>

                            <div class="form-row mb-3">
                                <div class="alert-note">
                                    路径名称匹配选项：营销诉求 - 投放位置 - 标的类型 - 优化目标 - 深度优化目标启用 - 深度优化目标 - 转化平台 - 竞价策略 - 搜索快投 - 广告组配置
                                </div>
                                <div class="form-row">
                                    <label class="form-label">路径名称</label>
                                    <div class="options-container">
                                        <div class="d-flex flex-wrap gap-2">
                                            <div v-for="(option, index) in pathOptions" :key="index" class="form-check option-tooltip">
                                                <input class="form-check-input" type="radio" :id="'path-'+index" v-model="pathName" :value="option">
                                                <label class="form-check-label" :for="'path-'+index">{{ option }}</label>
                                                <span class="tooltip-text">{{ pathTooltips[index] }}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="form-row mb-3">
                                <label class="form-label">智能扩量</label>
                                <div class="options-container">
                                    <div class="d-flex gap-3">
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" id="smart-expand-on" v-model="smartExpand" value="开启">
                                            <label class="form-check-label" for="smart-expand-on">开启</label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" id="smart-expand-off" v-model="smartExpand" value="关闭">
                                            <label class="form-check-label" for="smart-expand-off">关闭</label>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="form-row mb-3">
                                <label class="form-label required-field">指定预算</label>
                                <div class="options-container">
                                    <div class="input-group" style="width: 200px;">
                                        <input type="number" class="form-control" v-model="planBudget">
                                        <span class="input-group-text">元</span>
                                    </div>
                                </div>
                            </div>

                            <div class="form-row mb-3">
                                <label class="form-label">消耗速率</label>
                                <div class="options-container">
                                    <div class="d-flex gap-3">
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" id="rate-fast" v-model="consumeRate" value="加速消耗">
                                            <label class="form-check-label" for="rate-fast">加速消耗</label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" id="rate-normal" v-model="consumeRate" value="匀速消耗">
                                            <label class="form-check-label" for="rate-normal">匀速消耗</label>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="form-row mb-3">
                                <label class="form-label required-field">推广SPU</label>
                                <div class="options-container">
                                    <div class="input-group" style="width: 500px;">
                                        <select 
                                            class="form-select" 
                                            v-model="recomSpu" 
                                            @change="handleSpuChange($event)"
                                        >
                                            <option 
                                                v-for="(option, index) in recomSpuOptions" 
                                                :key="index" 
                                                :value="option.spuName"
                                            >
                                                {{ option.spuName }}
                                            </option>
                                        </select>
                                        <input 
                                            type="text" 
                                            class="form-control" 
                                            :value="taxonomy_name" 
                                            readonly 
                                            placeholder="行业类目"
                                        >
                                    </div>
                                </div>
                            </div>

                        </div>

                        <!-- 定向部分 -->
                        <div class="card-section">
                            <h3 class="section-title"><i class="bi bi-bullseye"></i> 定向设置</h3>

                            <!-- 模板关联定向包 -->
                            <div class="mb-4">
                                <div class="alert-note" style="font-weight: bold;">
                                    叁柒模板定向包：可以使用模板定向包快速复制到当前子账号
                                </div>
                                <div class="form-row">
                                    <label class="form-label">叁柒模板定向包</label>
                                    <div class="options-container">
                                        <div class="d-flex flex-wrap gap-2">
                                            <div v-for="option in all_target_config_temp" :key="option.id" class="form-check">
                                                <input class="form-check-input" type="checkbox"
                                                    :id="'package-'+option.id"
                                                    v-model="selectedTempTargetPackages"
                                                    :value="option.target_config_temp_name"
                                                    @change="showTempPackageDetailsByID(option.id, option.target_config_temp_name)">
                                                <label class="form-check-label" :for="'package-'+option.id">{{ option.target_config_temp_name }}</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>


                            <!-- 关联定向包多选框 -->
                            <div class="mb-4">
                                <div class="alert-note" style="font-weight: bold;">
                                    注意：勾选后，系统会根据以下定向包，为本笔记创建独立计划
                                </div>
                                <div class="form-row">
                                    <label class="form-label  required-field">关联定向包</label>
                                    <div class="options-container">
                                        <div class="d-flex flex-wrap gap-2">
                                            <div v-for="option in targetPackages" :key="option.id" class="form-check">
                                                <input class="form-check-input" type="checkbox"
                                                    :id="'package-'+option.id"
                                                    v-model="selectedTargetPackages"
                                                    :value="option.name"
                                                    @change="showPackageDetails(option.id, option.name)">
                                                <label class="form-check-label" :for="'package-'+option.id">{{ option.name }}</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- 定向包详情展示区 -->
                            <div class="card-section" v-if="selectedPackageDetails">
                                <h3 class="section-title"><i class="bi bi-info-circle"></i> 定向包详情</h3>
                                <div class="package-details">
                                    <h5>{{ selectedPackageDetails.name }}</h5>
                                    <div class="detail-item">
                                        <span class="detail-label">覆盖人群:</span>
                                        <span class="detail-value">{{ selectedPackageDetails.coverCount }}万</span>
                                    </div>
                                    <div class="detail-item">
                                        <span class="detail-label">性别分布:</span>
                                        <div class="progress-container">
                                            <div class="progress">
                                                <div class="progress-bar bg-danger" :style="{width: selectedPackageDetails.genderRatio.male + '%'}">
                                                    男 {{ selectedPackageDetails.genderRatio.male }}%
                                                </div>
                                                <div class="progress-bar bg-primary" :style="{width: selectedPackageDetails.genderRatio.female + '%'}">
                                                    女 {{ selectedPackageDetails.genderRatio.female }}%
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="detail-item">
                                        <span class="detail-label">年龄分布:</span>
                                        <div class="age-distribution">
                                            <div v-for="(value, key) in selectedPackageDetails.ageDistribution" :key="key" class="age-item">
                                                <span class="age-range">{{ key }}:</span>
                                                <span class="age-percent">{{ value }}%</span>
                                                <div class="progress">
                                                    <div class="progress-bar bg-success" :style="{width: value + '%'}"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="detail-item">
                                        <span class="detail-label">兴趣标签:</span>
                                        <div class="tags-container">
                                            <span v-for="(tag, index) in selectedPackageDetails.tags" :key="index" class="badge bg-warning text-dark me-1 mb-1">
                                                {{ tag }}
                                            </span>
                                        </div>
                                    </div>
                                    <div class="detail-item">
                                        <span class="detail-label">更新时间:</span>
                                        <span class="detail-value">{{ selectedPackageDetails.updateTime }}</span>
                                    </div>
                                </div>
                            </div>

                            <!-- 投放时段设置 -->
                            <div class="mb-4">
                                <div class="form-row">
                                    <label class="form-label">投放时段</label>
                                    <div class="options-container">
                                        <table class="time-range-table">
                                            <thead>
                                                <tr>
                                                    <th>星期</th>
                                                    <th>开始时间</th>
                                                    <th>结束时间</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr v-for="(day, index) in weekDays" :key="index">
                                                    <td>{{ day }}</td>
                                                    <td>
                                                        <select class="form-select form-select-sm" v-model="timeRanges[index].start">
                                                            <option v-for="hour in 24" :value="hour-1">{{ hour-1 }}</option>
                                                        </select>
                                                    </td>
                                                    <td>
                                                        <select class="form-select form-select-sm" v-model="timeRanges[index].end">
                                                            <option v-for="hour in 24" :value="hour-1">{{ hour-1 }}</option>
                                                        </select>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 更多定向 -->
                        <div class="card-section">
                            <h3 class="section-title"><i class="bi bi-sliders"></i> 更多定向</h3>

                            <div class="form-group-compact">
                                <div class="compact-row">
                                    <label class="form-label">性别</label>
                                    <div class="horizontal-options">
                                        <div v-for="(option, index) in genderOptions" :key="index" class="form-check">
                                            <input class="form-check-input" type="radio" :id="'gender-'+index" v-model="gender" :value="option">
                                            <label class="form-check-label" :for="'gender-'+index">{{ option }}</label>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group-compact">
                                <div class="compact-row">
                                    <label class="form-label">地域</label>
                                    <div class="horizontal-options">
                                        <div v-for="(option, index) in areaOptions" :key="index" class="form-check">
                                            <input class="form-check-input" type="radio" :id="'area-'+index" v-model="area" :value="option">
                                            <label class="form-check-label" :for="'area-'+index">{{ option }}</label>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group-compact">
                                <div class="compact-row">
                                    <label class="form-label">年龄</label>
                                    <div class="horizontal-options">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" id="age-all" v-model="ageAll" @change="toggleAgeAll">
                                            <label class="form-check-label" for="age-all">不限</label>
                                        </div>
                                        <div v-for="(option, index) in ageOptions.slice(1)" :key="index" class="form-check">
                                            <input class="form-check-input" type="checkbox" :id="'age-'+index" v-model="ageVars[index+1]" @change="uncheckAgeAll">
                                            <label class="form-check-label" :for="'age-'+index">{{ option }}</label>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group-compact">
                                <div class="compact-row">
                                    <label class="form-label">平台</label>
                                    <div class="horizontal-options">
                                        <div v-for="(option, index) in platformOptions" :key="index" class="form-check">
                                            <input class="form-check-input" type="radio" :id="'platform-'+index" v-model="platform" :value="option">
                                            <label class="form-check-label" :for="'platform-'+index">{{ option }}</label>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group-compact">
                                <div class="compact-row">
                                    <label class="form-label">手机价格</label>
                                    <div class="horizontal-options">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" id="price-all" v-model="priceAll" @change="togglePriceAll">
                                            <label class="form-check-label" for="price-all">不限</label>
                                        </div>
                                        <div v-for="(option, index) in telPriceOptions.slice(1)" :key="index" class="form-check">
                                            <input class="form-check-input" type="checkbox" :id="'price-'+index" v-model="telPriceVars[index+1]" @change="uncheckPriceAll">
                                            <label class="form-check-label" :for="'price-'+index">{{ option }}</label>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group-compact">
                                <div class="compact-row">
                                    <label class="form-label">目标成本</label>
                                    <div class="horizontal-options">
                                        <input type="number" class="form-control" style="width: 100px;" v-model="targetCost" step="0.01" min="0">
                                        <span>元</span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 创意信息 -->
                        <div class="card-section">
                            <h3 class="section-title"><i class="bi bi-lightbulb"></i> 创意信息</h3>

                            <div class="form-row mb-3">
                                <label class="form-label required-field">创意名称</label>
                                <div class="options-container">
                                    <input type="text" class="form-control" v-model="creativeName" placeholder="请输入创意名称" style="width: 300px;">
                                </div>
                            </div>

                            <div class="form-row mb-3">
                                <label class="form-label">监测链接</label>
                                <div class="options-container">
                                    <textarea class="form-control text-area-box" v-model="monitorText" placeholder="请输入监测链接" style="width: 100%;"></textarea>
                                </div>
                            </div>

                            <div class="form-row mb-3">
                                <label class="form-label">曝光链接</label>
                                <div class="options-container">
                                    <textarea class="form-control text-area-box" v-model="exposureText" placeholder="请输入曝光链接" style="width: 100%;"></textarea>
                                </div>
                            </div>

                            <div class="form-row mb-3">
                                <label class="form-label">封面全选</label>
                                <div class="options-container">
                                    <div class="horizontal-options">
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" id="cover-yes" v-model="coverAll" value="是">
                                            <label class="form-check-label" for="cover-yes">是</label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" id="cover-no" v-model="coverAll" value="否">
                                            <label class="form-check-label" for="cover-no">否</label>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="form-row mb-3">
                                <label class="form-label">自动优化</label>
                                <div class="options-container">
                                    <div class="horizontal-options">
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" id="auto-optimize-on" v-model="autoOptimize" value="开启">
                                            <label class="form-check-label" for="auto-optimize-on">开启</label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" id="auto-optimize-off" v-model="autoOptimize" value="关闭">
                                            <label class="form-check-label" for="auto-optimize-off">关闭</label>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="form-row mb-3">
                                <label class="form-label">转化组件</label>
                                <div class="options-container">
                                    <div class="horizontal-options">
                                        <div v-for="(option, index) in transCompOptions" :key="index" class="form-check">
                                            <input class="form-check-input" type="radio" :id="'trans-'+index" v-model="transCompType" :value="option" @change="updateTransComp">
                                            <label class="form-check-label" :for="'trans-'+index">{{ option }}</label>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div v-show="transCompType === '搜索组件'">
                                <div class="form-row mb-3">
                                    <label class="form-label">组件位置</label>
                                    <div class="options-container">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox" id="bottom-check" v-model="bottomVar">
                                                    <label class="form-check-label" for="bottom-check">图片或视频底部</label>
                                                </div>
                                                <input type="text" class="form-control mt-2" v-model="bottomEntry" v-show="bottomVar" style="width: 100%;">
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox" id="comment-check" v-model="commentVar">
                                                    <label class="form-check-label" for="comment-check">置顶评论</label>
                                                </div>
                                                <input type="text" class="form-control mt-2" v-model="commentEntry" v-show="commentVar" style="width: 100%;">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 笔记ID独立模块 -->
                        <div class="card-section">
                            <h3 class="section-title"><i class="bi bi-file-earmark-text"></i> 笔记信息</h3>
                            <div class="form-row mb-3">
                                <label class="form-label required-field">笔记ID</label>
                                <div class="options-container">
                                    <input type="text" class="form-control" v-model="unitId" placeholder="请输入笔记ID" style="width: 300px;">
                                </div>
                            </div>
                        </div>

                        <div class="card-section" v-if="batchData.length > 0">
                            <h3 class="section-title"><i class="bi bi-table"></i> 已添加的计划列表</h3>
                            <div class="table-responsive" style="overflow-x: auto; max-width: 100%;">
                                <table class="table table-bordered table-hover" style="min-width: 1500px; white-space: nowrap;">
                                    <thead>
                                        <tr>
                                            <th style="min-width: 120px;">计划名称</th>
                                            <th style="min-width: 100px;">笔记ID</th>
                                            <th style="min-width: 120px;">路径名称</th>
                                            <th style="min-width: 100px;">智能扩量</th>
                                            <th style="min-width: 100px;">消耗速率</th>
                                            <th style="min-width: 120px;">投放时段</th>
                                            <th style="min-width: 120px;">关联定向包</th>
                                            <th style="min-width: 120px;">指定预算(元)</th>
                                            <th style="min-width: 120px;">推广SPU</th>
                                            <th style="min-width: 80px;">性别</th>
                                            <th style="min-width: 120px;">地域</th>
                                            <th style="min-width: 80px;">年龄</th>
                                            <th style="min-width: 80px;">平台</th>
                                            <th style="min-width: 100px;">手机价格</th>
                                            <th style="min-width: 100px;">目标成本</th>
                                            <th style="min-width: 120px;">创意名称</th>
                                            <th style="min-width: 120px;">转化组件</th>
                                            <th style="min-width: 150px;">操作</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr v-for="(batch, batchIndex) in batchData" :key="batchIndex">
                                            <td>
                                                <span v-if="!batch.editing">{{ batch.planData['计划名'][0] }}</span>
                                                <input v-else type="text" v-model="batch.planData['计划名'][0]" class="form-control form-control-sm">
                                            </td>
                                            <td>
                                                <span v-if="!batch.editing">{{ batch.planData['笔记ID'][0] }}</span>
                                                <input v-else type="text" v-model="batch.planData['笔记ID'][0]" class="form-control form-control-sm">
                                            </td>
                                            <td>
                                                <span v-if="!batch.editing">{{ batch.planData['路径名称'][0] }}</span>
                                                <select v-else v-model="batch.planData['路径名称'][0]" class="form-select form-select-sm">
                                                    <option v-for="(option, idx) in pathOptions" :key="idx" :value="option">{{ option }}</option>
                                                </select>
                                            </td>
                                            <td>
                                                <span v-if="!batch.editing">{{ batch.planData['智能扩量'][0] }}</span>
                                                <select v-else v-model="batch.planData['智能扩量'][0]" class="form-select form-select-sm">
                                                    <option value="开启">开启</option>
                                                    <option value="关闭">关闭</option>
                                                </select>
                                            </td>
                                            <td>
                                                <span v-if="!batch.editing">{{ batch.planData['消耗速率'][0] }}</span>
                                                <select v-else v-model="batch.planData['消耗速率'][0]" class="form-select form-select-sm">
                                                    <option value="加速消耗">加速消耗</option>
                                                    <option value="匀速消耗">匀速消耗</option>
                                                </select>
                                            </td>
                                            <td>
                                                <span v-if="!batch.editing">{{ batch.planData['投放时段'][0] }}</span>
                                                <input v-else type="text" v-model="batch.planData['投放时段'][0]" class="form-control form-control-sm">
                                            </td>
                                            <td>
                                                <span v-if="!batch.editing">{{ batch.planData['关联定向包'][0] }}</span>
                                                <select v-else v-model="batch.planData['关联定向包'][0]" class="form-select form-select-sm">
                                                    <option v-for="(pkg, idx) in targetPackages" :key="idx" :value="pkg">{{ pkg }}</option>
                                                </select>
                                            </td>
                                            <td>
                                                <span v-if="!batch.editing">{{ batch.planData['指定预算'][0] }}</span>
                                                <input v-else type="number" v-model.number="batch.planData['指定预算'][0]" class="form-control form-control-sm">
                                            </td>
                                            <td>
                                                <span v-if="!batch.editing">{{ batch.planData['推广SPU'][0] }}</span>
                                                <input v-else type="text" v-model="batch.planData['推广SPU'][0]" class="form-control form-control-sm">
                                            </td>
                                            <td>
                                                <span v-if="!batch.editing">{{ batch.planData['性别'][0] }}</span>
                                                <select v-else v-model="batch.planData['性别'][0]" class="form-select form-select-sm">
                                                    <option value="不限">不限</option>
                                                    <option value="男">男</option>
                                                    <option value="女">女</option>
                                                </select>
                                            </td>
                                            <td>
                                                <span v-if="!batch.editing">{{ batch.planData['地域'][0] }}</span>
                                                <select v-else v-model="batch.planData['地域'][0]" class="form-select form-select-sm">
                                                    <option value="不限">不限</option>
                                                    <option value="中国">中国</option>
                                                    <option value="中国(排除港澳台)">中国(排除港澳台)</option>
                                                </select>
                                            </td>
                                            <td>
                                                <span v-if="!batch.editing">{{ batch.planData['年龄'][0] }}</span>
                                                <input v-else type="text" v-model="batch.planData['年龄'][0]" class="form-control form-control-sm">
                                            </td>
                                            <td>
                                                <span v-if="!batch.editing">{{ batch.planData['平台'][0] }}</span>
                                                <select v-else v-model="batch.planData['平台'][0]" class="form-select form-select-sm">
                                                    <option value="不限">不限</option>
                                                    <option value="android">android</option>
                                                    <option value="ios">ios</option>
                                                </select>
                                            </td>
                                            <td>
                                                <span v-if="!batch.editing">{{ batch.planData['手机价格'][0] }}</span>
                                                <input v-else type="text" v-model="batch.planData['手机价格'][0]" class="form-control form-control-sm">
                                            </td>
                                            <td>
                                                <span v-if="!batch.editing">{{ batch.planData['目标成本'][0] }}</span>
                                                <input v-else type="number" step="0.01" v-model.number="batch.planData['目标成本'][0]" class="form-control form-control-sm">
                                            </td>
                                            <td>
                                                <span v-if="!batch.editing">{{ batch.creativeData['创意名称'][0] }}</span>
                                                <input v-else type="text" v-model="batch.creativeData['创意名称'][0]" class="form-control form-control-sm">
                                            </td>
                                            <td>
                                                <span v-if="!batch.editing">{{ batch.creativeData['转化组件'][0] }}</span>
                                                <select v-else v-model="batch.creativeData['转化组件'][0]" class="form-select form-select-sm">
                                                    <option v-for="(option, idx) in transCompOptions" :key="idx" :value="option">{{ option }}</option>
                                                </select>
                                            </td>
                                            <td>
                                                <div v-if="!batch.editing">
                                                    <button class="btn btn-sm btn-outline-primary" @click="batch.editing = true">
                                                        <i class="bi bi-pencil"></i> 编辑
                                                    </button>
                                                    <button class="btn btn-sm btn-outline-danger" @click="deleteBatchItem(batchIndex)">
                                                        <i class="bi bi-trash"></i> 删除
                                                    </button>
                                                </div>
                                                <div v-else>
                                                    <button class="btn btn-sm btn-success" @click="saveBatchEdit(batchIndex)">
                                                        <i class="bi bi-check"></i> 保存
                                                    </button>
                                                    <button class="btn btn-sm btn-secondary" @click="batch.editing = false">
                                                        <i class="bi bi-x"></i> 取消
                                                    </button>
                                                </div>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <!-- Error Toast -->
                        <div class="position-fixed top-0 end-0 p-3" style="z-index: 11">
                            <div id="errorToast" class="toast align-items-center text-white bg-danger" role="alert" aria-live="assertive" aria-atomic="true">
                                <div class="d-flex">
                                    <div class="toast-body" id="errorToastMessage"></div>
                                    <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
                                </div>
                            </div>
                        </div>

                        <!-- Success Toast -->
                        <div class="position-fixed top-0 end-0 p-3" style="z-index: 11">
                            <div id="successToast" class="toast align-items-center text-white bg-success" role="alert" aria-live="assertive" aria-atomic="true">
                                <div class="d-flex">
                                    <div class="toast-body" id="successToastMessage"></div>
                                    <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
                                </div>
                            </div>
                        </div>

                        <div class="action-buttons">
                            <button class="btn btn-outline-xhs" @click="addToBatch(1)">
                                <i class="bi bi-plus-circle"></i> 继续追加
                            </button>
                            <button class="btn btn-xhs" @click="generateExcel">
                                <i class="bi bi-download"></i> 下载Excel
                            </button>
                        </div>
                        <input type="file" id="hiddenFileInput" style="display:none;" />
                    </div>
                </div>
            </div>
        </div>

        <!-- 定向包详情侧边栏 -->
        <div class="package-sidebar">
            <div class="sidebar-header">
                <h4><i class="bi bi-collection"></i> 定向包详情</h4>
            </div>
            <div class="sidebar-content">
                <div v-for="(detail, index) in packageDetailsList" :key="index" class="package-detail-card">
                    <div class="d-flex justify-content-between align-items-center">
                        <h5 class="package-title">{{ detail.name }}</h5>
                                                        <button class="btn btn-sm btn-primary" 
                                                                @click="copyTargetPackage(detail)"
                                                                v-if="showCopyButton && all_target_config_temp.some(pkg => pkg.target_config_temp_name === detail.name)"
                                                                :disabled="detail.loading">
                                                            <template v-if="detail.loading">
                                                                <span class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span>
                                                                复制中...
                                                            </template>
                                                            <template v-else>
                                                                <i class="bi bi-files me-1"></i>复制定向包
                                                            </template>
                                                        </button>
                    </div>

                    <div class="detail-section" v-if="detail.desc">
                        <div class="detail-section-title">
                            <i class="bi bi-card-text"></i> 定向包描述
                        </div>
                        <div class="detail-item">
                            <span class="detail-value">{{ detail.desc }}</span>
                        </div>
                    </div>

                    <div class="detail-section">
                        <div class="detail-section-title">
                            <i class="bi bi-people"></i> 基础定向
                        </div>
                        <div class="compact-grid">
                            <div class="compact-item">
                                <div>性别</div>
                                <div>{{ detail.targetGender === '1' ? '女' : detail.targetGender === '0' ? '男' : '不限' }}</div>
                            </div>
                            <div class="compact-item">
                                <div>年龄</div>
                                <div>{{detail.targetAge === 'all' ? '不限' : detail.targetAge.replace(/#/g, ' ') }}</div>
                            </div>
                            <div class="compact-item">
                                <div>地域</div>
                                <div>{{ detail.targetCity === 'all' ? '不限' : detail.targetCity }}</div>
                            </div>
                            <div class="compact-item">
                                <div>平台</div>
                                <div>{{ detail.targetDevice === 'all' ? '不限' : detail.targetDevice }}</div>
                            </div>
                            <div class="compact-item">
                                <div>手机价格</div>
                                <div>{{ detail.targetDevicePrice === 'all' ? '不限' : detail.targetDevicePrice.replace(/#/g, ' ')  }}</div>
                            </div>
                            <div class="compact-item">
                                <div>智能扩量</div>
                                <div>{{ detail.intelligentExpansion === 1 ? '开启' : '关闭' }}</div>
                            </div>
                        </div>
                    </div>

                    <div class="detail-section" v-if="detail.crowdPkg && detail.crowdPkg.length > 0">
                        <div class="detail-section-title">
                            <i class="bi bi-collection"></i> 人群包
                            <span class="toggle-btn" @click="detail.showCrowdPkg = !detail.showCrowdPkg">
                                {{ detail.showCrowdPkg ? '收起' : '展开' }}
                            </span>
                        </div>
                        <div v-show="detail.showCrowdPkg">
                            <div v-if="detail.crowdPkg.some(pkg => pkg.type === 'common')">
                                <div class="detail-subtitle">
                                    <i class="bi bi-collection"></i> 平台精选-场景人群
                                </div>
                                <div class="tags-container">
                                    <span v-for="(pkg, idx) in detail.crowdPkg.filter(pkg => pkg.type === 'common')"
                                          :key="'industry-'+idx" class="crowd-pkg-item">
                                        {{ pkg.name }}
                                    </span>
                                </div>
                            </div>

                            <div v-if="detail.crowdPkg.some(pkg => pkg.type === 'timeliness')">
                                <div class="detail-subtitle">
                                    <i class="bi bi-calendar-event"></i> 平台精选-节促人群
                                </div>
                                <div class="tags-container">
                                    <span v-for="(pkg, idx) in detail.crowdPkg.filter(pkg => pkg.type === 'timeliness')"
                                          :key="'industry-'+idx" class="crowd-pkg-item">
                                        {{ pkg.name }}
                                    </span>
                                </div>
                            </div>

                            <div v-if="detail.crowdPkg.some(pkg => pkg.type === 'industry_strategy')">
                                <div class="detail-subtitle">
                                    <i class="bi bi-diagram-3"></i> 行业人群-策略人群
                                </div>
                                <div class="tags-container">
                                    <span v-for="(pkg, idx) in detail.crowdPkg.filter(pkg => pkg.type === 'industry_strategy')"
                                          :key="'industry-'+idx" class="crowd-pkg-item">
                                        {{ pkg.name }}
                                    </span>
                                </div>
                            </div>

                            <div v-if="detail.crowdPkg.some(pkg => pkg.type === 'industry_category')">
                                <div class="detail-subtitle">
                                    <i class="bi bi-funnel"></i> 行业人群-垂类人群
                                </div>
                                <div class="tags-container">
                                    <span v-for="(pkg, idx) in detail.crowdPkg.filter(pkg => pkg.type === 'industry_category')"
                                          :key="'industry-'+idx" class="crowd-pkg-item">
                                        {{ pkg.name }}
                                    </span>
                                </div>
                            </div>

                            <div v-if="detail.crowdPkg.some(pkg => !pkg.type)">
                                <div class="detail-subtitle">
                                    <i class="bi bi-people"></i> 人群包
                                </div>
                                <div class="tags-container">
                                    <span v-for="(pkg, idx) in detail.crowdPkg.filter(pkg => !pkg.type)"
                                          :key="'other-'+idx" class="crowd-pkg-item">
                                        {{ pkg.name }} (ID:{{ pkg.groupId }})
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="detail-section" v-if="(detail.keywords && detail.keywords.length > 0) || (detail.interestKeywords && detail.interestKeywords.length > 0)">
                        <div class="detail-section-title">
                            <i class="bi bi-search"></i> 关键词
                            <span class="toggle-btn" @click="detail.showKeywords = !detail.showKeywords">
                                {{ detail.showKeywords ? '收起' : '展开' }}
                            </span>
                        </div>
                        <div v-show="detail.showKeywords">
                            <div v-if="detail.keywords && detail.keywords.length > 0">
                                <div class="detail-subtitle">
                                    <i class="bi bi-arrow-right-circle"></i> 关键词行为
                                </div>
                                <div class="tags-container">
                                    <span v-for="(keyword, idx) in detail.keywords" :key="'behavior-'+idx" class="tag-item">
                                        {{ keyword }}
                                    </span>
                                </div>
                            </div>
                            <div v-if="detail.interestKeywords && detail.interestKeywords.length > 0">
                                <div class="detail-subtitle">
                                    <i class="bi bi-heart"></i> 关键词兴趣
                                </div>
                                <div class="tags-container">
                                    <span v-for="(keyword, idx) in detail.interestKeywords" :key="'interest-'+idx" class="tag-item">
                                        {{ keyword }}
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="detail-section" v-if="(detail.industryInterestTarget.contentInterests && detail.industryInterestTarget.contentInterests.length > 0) || (detail.industryInterestTarget.shoppingInterests && detail.industryInterestTarget.shoppingInterests.length > 0)">
                        <div class="detail-section-title">
                            <i class="bi bi-tags"></i> 行业兴趣
                        </div>
                        <div v-if="detail.industryInterestTarget.contentInterests && detail.industryInterestTarget.contentInterests.length > 0">
                            <div class="detail-item">
                                <span class="detail-label">行业内容兴趣:</span>
                                <span class="detail-value">{{ detail.industryInterestTarget.contentInterests.map(item => item.name).join(', ') }}</span>
                            </div>
                        </div>
                        <div v-if="detail.industryInterestTarget.shoppingInterests && detail.industryInterestTarget.shoppingInterests.length > 0">
                            <div class="detail-item">
                                <span class="detail-label">行业购物兴趣:</span>
                                <span class="detail-value">{{ detail.industryInterestTarget.shoppingInterests.map(item => item.name).join(', ') }}</span>
                            </div>
                        </div>
                    </div>


                </div>
            </div>
        </div>



        
    </div>
</body>
</html>